<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="header.jsp"%>
<html>
<head>
    <title>json格式数据传递</title>
<%--    引入jquery的js组件
        和json转化js文件
        --%>
    <script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="static/js/jquery.json.js"></script>
    <script>
        /*页面加载完成之后需要执行的代码*/
        $(function () {

            $('#btn01').click(function () {

                /*发送Ajax请求*/
                $.ajax({
                    type: "POST",
                    url: "stus/add",
                    data: {
                        stuName:"一护",
                        stuNo:"4578",
                        age:"50"
                    },
                    success: function(msg){
                        console.info(msg);
                    }
                });
            });

            //前端发送JSON数据
            $('#btn02').click(function () {

                var user = {
                    stuName:"一护",
                    stuNo:"4578",
                    age:"50"
                };

                //将JS对象，转成JSON对象
                var json = $.toJSON(user);

                /*发送Ajax请求*/
                $.ajax({
                    type: "POST",
                    url: "stus/update",
                    contentType:"application/json;charset=utf-8",//告诉后端，传递过来的数据是JSON
                    data: json,
                    success: function(msg){
                        console.info(msg);
                    }
                });
            });

        });

    </script>

</head>
<body>

<button id="btn01">新增(返回JSON)</button>
<button id="btn02">新增(发送&返回JSON)</button>
<button></button>

</body>
</html>